import React, { forwardRef, useRef, useState } from 'react'
import { StyleSheet, Text, TextInput, View } from 'react-native'

/* 
情景  在父组件中想调用子组件的ref方法 比如失焦 聚焦方法

- 方式1  通过 forwardRef 包裹子组件 转发ref  在父组件中接收ref 并直接调用聚焦和失焦的方法

- 方式2 对外暴露api
*/


export default forwardRef <TextInput,any> (function CustomInput( props, ref ) {

  const [value, setValue] = useState('')
  const changeInp = (e: any) => {
    const { text } = e.nativeEvent
    setValue(text)
  }
  return (
    <View style={styles.view} >
      <View style={[styles.inputLayout]} >
        <TextInput
          ref={ref}
          style={[styles.input, value ? value.length === 11 && styles.show : styles.noshow]}
          value={value}
          maxLength={11}
          keyboardType='number-pad'
          onChange={(e) => changeInp(e)}
        />
      </View>
      <View style={[styles.tipLayout, value ? value.length === 11 && styles.show : styles.noshow]}>
        <Text>
          {
            !value ? '请输入您的手机号' : value.length === 11 ? '输入正确' : '请检查输入的手机号格式'
          }
        </Text>
      </View>
    </View>
  )
})
const styles = StyleSheet.create({
  view: {
    width: '100%',

  },
  noshow: {
    borderColor: '#999',

  },

  show: {
    borderColor: '#25aff3',
    color:'#25aff3'
  },
  inputLayout:{
    width:300,

  },

  input: {
    borderWidth: 1,
    borderRadius: 12,
    // width: '80%',
    paddingHorizontal: 16,
    paddingVertical: 10,
    color: '#999',
    fontSize: 18,

  },

  tipLayout: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
    paddingHorizontal: 6,

  }
})
